<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item" :class="{active:indexs===item.id}" @click="audioChange(item.id)" v-for="(item,index) in headTop" :key='index'>{{item.name}}</span>
    </div>
    <!-- 底部的table -->
    <table class="el-table playlit-table">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr class="el-table__row" v-for="(item,index) in songArr" :key="index" @click="sendSong(item.id,songArr)">
          <td>{{index+1}}</td>
          <td>
            <div class="img-wrap">
              <img v-lazy="item.album.picUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{item.name}}</span>
                <span class="iconfont icon-mv"></span>
              </div>
              <span>{{item.album.name}}</span>
            </div>
          </td>
          <td>{{item.artists[0].name}}</td>
          <td>{{item.name}}</td>
          <td>{{item.duration|time}}</td>
        </tr>

      </tbody>
    </table>
  </div>
</template>

<script>
import {getNewSong} from '@/api/newSong'
import {getLunBoMusic} from'@/api/getMusic'
export default {
  name: 'songs',
  data() {
    return {
      headTop:[{
        name:'全部',id:0},
        {name:'华语',id:7 },
        {name:'欧美',id:96},
        {name:'日本',id:8},
        {name:'韩国',id:16}
      ],
      indexs:0,
      //接收热门歌曲的数据
      songArr:[],


    };
  },
  created() {
    this.getNewSong()
  },
  methods: {
    // 点击切换数据
    audioChange(id){
      // 进行数据的赋值
      console.log(1,id);
      this.indexs=id
      //调用接口
      this.getNewSong()
    },
    // 点击歌曲进行播放
   async sendSong(id,item){
     const {data:{data}}=await getLunBoMusic(id)

      // 点击进行播放
      if(data[0].url){
      this.$store.commit('getUrl',data[0].url)
       // 获取音乐的id,进行数据的请求
        this.$store.commit('getId',id)
      // 将数据保存到vuex中
       this.$store.commit('getArr',item)
      }else{
        this.$message('暂无数据')
        // 下一首播放
        this.$store.dispatch('getAction')
      }

    },
    // 获取最新音乐的列表
    async getNewSong(){
      const {data:{data}}=await getNewSong(this.indexs)
      this.songArr=data

    }
  },
};
</script>

<style >

</style>
